<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
      <el-breadcrumb-item>保修列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!--Tab-->
      <el-tabs v-model="activeName" @tab-click="changeArea" type="card">
        <el-tab-pane label="桃园" name="桃园">
          <el-tabs v-model="towerIds" ref="tabsRef" @tab-click="getDamagerUpList">
            <el-tab-pane :label="item.towerName" ref="tabPaneRef" v-for="item in taoyuan" :key="item.towerId"
              :name="item.towerName">
              <!--学生列表区域-->
              <el-table :data="damageUpList" ref="towerRef" highlight-current-row>
                <el-table-column type="index" :index="indexMethod"></el-table-column>
                <el-table-column label="所在楼宇" prop="tower"></el-table-column>
                <el-table-column label="宿舍号" prop="dorm"></el-table-column>
                <el-table-column label="学号" min-width='90px' prop="studentNumber"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="班级" prop="class"></el-table-column>
                <el-table-column label="损坏物品" prop="article"></el-table-column>
                <el-table-column label="描述" min-width='90px' prop="desc"></el-table-column>
                <el-table-column label="电话" prop="tel"></el-table-column>
                <el-table-column label="上报时间" min-width='70px' prop="time"></el-table-column>
                <el-table-column label="完成时间" min-width='70px' prop="finishTime"></el-table-column>
                <el-table-column label="操作" min-width='130px'>
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isSolve" active-text="已完成" inactive-text="未完成"
                      @change="getSwitchCurRow(scope.row._id,scope.row.isSolve,scope.row.tower,scope.row)"
                      active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="dataList.pagenum" :page-sizes="[1, 3, 5, 7]" :page-size="dataList.pagesize"
              layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="兰园" name="兰园">
          <el-tabs v-model="towerIds" @tab-click="getDamagerUpList">
            <el-tab-pane :label="item.towerName" v-for="item in lanyuan" :key="item.towerId" :name="item.towerName">
              <!--学生列表区域-->
              <el-table :data="damageUpList" ref="towerRef" highlight-current-row>
                <el-table-column type="index" :index="indexMethod"></el-table-column>
                <el-table-column label="所在楼宇" prop="tower"></el-table-column>
                <el-table-column label="宿舍号" prop="dorm"></el-table-column>
                <el-table-column label="学号" prop="studentNumber"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="班级" prop="class"></el-table-column>
                <el-table-column label="损坏物品" prop="article"></el-table-column>
                <el-table-column label="描述" prop="desc"></el-table-column>
                <el-table-column label="电话" prop="tel"></el-table-column>
                <el-table-column label="上报时间" min-width='70px' prop="time"></el-table-column>
                <el-table-column label="是否解决" prop="isSolve"></el-table-column>
                <el-table-column label="操作" min-width='150px'>
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isSolve" active-text="未完成" inactive-text="已完成" active-color="#13ce66"
                      inactive-color="#ff4949">
                    </el-switch>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="dataList.pagenum" :page-sizes="[1, 3, 5, 7]" :page-size="dataList.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="荔园" name="荔园">
          <el-tabs v-model="towerIds" @tab-click="getDamagerUpList">
            <el-tab-pane :label="item.towerName" v-for="item in liyuan" :key="item.towerId" :name="item.towerName">
              <!--学生列表区域-->
              <el-table :data="damageUpList" ref="towerRef" highlight-current-row>
                <el-table-column type="index" :index="indexMethod"></el-table-column>
                <el-table-column label="所在楼宇" prop="tower"></el-table-column>
                <el-table-column label="宿舍号" prop="dorm"></el-table-column>
                <el-table-column label="学号" prop="studentNumber"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="班级" prop="class"></el-table-column>
                <el-table-column label="损坏物品" prop="article"></el-table-column>
                <el-table-column label="描述" prop="desc"></el-table-column>
                <el-table-column label="电话" prop="tel"></el-table-column>
                <el-table-column label="上报时间" min-width='70px' prop="time"></el-table-column>
                <el-table-column label="是否解决" prop="isSolve"></el-table-column>
                <el-table-column label="操作" min-width='150px'>
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isSolve" active-text="未完成" inactive-text="已完成" active-color="#13ce66"
                      inactive-color="#ff4949">
                    </el-switch>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="dataList.pagenum" :page-sizes="[1, 3, 5, 7]" :page-size="dataList.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!--上传费用的dialog-->
    <el-dialog title="上传已维修费用报表" :visible.sync="dialogCostForm" width="50%">
      <!--Diage内容主体区域-->
      <el-form ref="costForm" :model="costForm" :rules="rule" label-width="80px">
        <el-form-item label="楼宇" prop="tower">
          <el-input v-model="costForm.tower"></el-input>
        </el-form-item>
        <el-form-item label="宿舍号" prop="dorm">
          <el-input v-model="costForm.dorm"></el-input>
        </el-form-item>
        <el-form-item label="上报人" prop="name">
          <el-input v-model="costForm.name"></el-input>
        </el-form-item>
        <el-form-item label="维修人" prop="serviceman">
          <el-input v-model="costForm.serviceman"></el-input>
        </el-form-item>
        <el-form-item label="物品更换" prop="repalce">
          <el-input v-model="costForm.repalce"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="count">
          <el-input-number v-model="num" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="费用" prop="costs">
          <el-input v-model="costForm.costs"></el-input>
        </el-form-item>
      </el-form>
      <!--内容主体底部-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="finishFixed(costForm._id,!costForm.isSolve,costForm.tower)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { formDate } from 'commonjs/formatDate.js'
import { dormDamageMixin } from 'commonjs/dormDamageMixin.js'
export default {
  name: 'LogisticsRepair',
  props: [''],
  data () {
    return {
      activeName: '桃园',
      towerIds: '桃园1',
      damageUpList: [],
      taoyuan: [
        {
          towerId: 't1',
          towerName: '桃园1'
        }, {
          towerId: 't2',
          towerName: '桃园2'
        }, {
          towerId: 't3',
          towerName: '桃园3'
        }, {
          towerId: 't4',
          towerName: '桃园4'
        }, {
          towerId: 't5',
          towerName: '桃园5'
        }, {
          towerId: 't6',
          towerName: '桃园6'
        }
      ],
      liyuan: [
        {
          towerId: 'l1',
          towerName: '荔园1'
        }, {
          towerId: 'l2',
          towerName: '荔园2'
        }, {
          towerId: 'l3',
          towerName: '荔园3'
        }, {
          towerId: 'l4',
          towerName: '荔园4'
        }, {
          towerId: 'l5',
          towerName: '荔园5'
        }, {
          towerId: 'l6',
          towerName: '荔园6'
        }
      ],
      lanyuan: [
        {
          towerId: 'lan1',
          towerName: '兰园1'
        }, {
          towerId: 'lan2',
          towerName: '兰园2'
        }, {
          towerId: 'lan3',
          towerName: '兰园3'
        }, {
          towerId: 'lan4',
          towerName: '兰园4'
        }, {
          towerId: 'lan5',
          towerName: '兰园5'
        }, {
          towerId: 'lan6',
          towerName: '兰园6'
        }
      ],
      dataList: {
        pagenum: 1,
        pagesize: 7
      },
      total: 0,
      dialogCostForm: false,
      // 表单规则
      rule: {
        serviceman: [
          { required: true, message: '请输入维修员姓名', trigger: 'blur' }
        ]
      },
      costForm: {},
      num: 0,
      switchMark: false
    }
  },
  created () {
    this.getDamagerUpList(undefined, null, this.towerIds)
  },
  methods: {
    handleSizeChange (size) {
      this.dataList.pagesize = size
      const towerItem = this.$refs.towerRef[0].data[0].tower
      // console.log(towerItem)
      this.getDamagerUpList(undefined, null, towerItem)
    },
    handleCurrentChange (currentPage) {
      this.dataList.pagenum = currentPage
      const towerItem = this.$refs.towerRef[0].data[0].tower
      // console.log(this.$refs.towerRef)
      this.getDamagerUpList(undefined, null, towerItem)
    },
    async finishFixedclick (id, isSolve, tower) {
      const { data: res } = await this.$axios.get('/damage/HBFixed', {
        params: {
          _id: id,
          tower,
          isSolve: isSolve,
          finishTime: new Date().getTime()
        }
      })
      if (res.code === 0) {
        // console.log(res)
        this.damageUpList = []
        res.damageUpList.forEach(valid => {
          // console.log(valid.time)
          valid.time = formDate(valid.time)
          valid.finishTime = formDate(valid.finishTime)
          if (valid.finishTime === '1970-01-01 08:00:00') {
            valid.finishTime = ''
            this.damageUpList.push(valid)
          } else {
            this.damageUpList.push(valid)
          }
        })
        // console.log(this.damageUpList)
      } else {
        this.$message.error(res.msg)
      }
      this.fixedCostUp()
      this.dialogCostForm = false
      this.costForm = {}
    },
    // 切换宿舍区域，桃园，兰园，荔园切换
    changeArea (tab) {
      console.log('切换：', tab)
      this.activeName = tab.label
      this.towerIds = tab.label + '1'
      this.dataList.pagenum = 1
      // console.log(this.towerIds)
      this.getDamagerUpList(undefined, null, this.towerIds)
    }
  },
  mixins: [dormDamageMixin]
}

</script>
<style lang='less' scoped>
  .el-table .cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
